import React, { Component,PureComponent } from 'react'

class Child extends PureComponent{
    // shouldComponentUpdate(prevProps,prevState){  //prevProps,prevState:前一个的属性和状态
    //     return prevProps.num !== this.props.num; //前一个和当前的一样，则不改变；不一样才更新
    // } 

    // shouldComponentUpdate(){
    //     return false;
    // }            //false:child-rander不再执行
    render(){
        console.log('child --render')
        return(
           <div>
                <h2>这里是子组件</h2>
                <h2>{this.props.num}</h2>
           </div>
        )
    }
}



export default class PureCom extends PureComponent {
    state = {num:0,list:[1,2,3]}
    a = 200;
    add = ()=>{
        //方法一：不推荐使用。在Component中可行，在PureComponent不可行。
        // this.state.list.push[4];
        // this.setState({list:this.state})   //push后list的地址没有变，在Component中可行，
                                            //在PureComponent中不可行，对比地址相同不进行更新
        //方法二
        // let arr = [...this.state.list]
        // arr.push[4]
        // this.state.list({list:arr});

        //方法三
        this.setState({list:[4,...this.state]})
        // this.setState({num:this.state.num+1})
        // this.setState({});
        
    }
    render() {
        console.log('PureComponent')
        console.log(this.state.num);
        
        return (
            <div>
                <h1>{this.state.num}</h1>
                <button onClick={this.add}>点我+1</button>
                <Child num={this.state.num}/>
            </div>
        )
    }
}
